<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {OtcConfirm, OtcTransactions, AgentList,SearchAgent,Userdeal} from '../api.js';
  import {OtcState, OtcType} from '../conf.js';
  import Query from '../model/query.js';
  import {IsAdmin} from '../lib/token.js';
  import Event from '../model/event.js';
  import moment from 'moment';
  import BtnSmall from '../components/btn-small.svelte';

  let info = {
    total: 0,
    many: 0,
    less: 0,
    users: 0,
    buy: 0,
    sell: 0
  }

  let data = {title: ["订单编号", "姓名", "手机号","邮箱", "身份证", "代理人姓名", "类型", "数量", "单价",  "创建时间", ""], data: []}

  // let data = {}
  let adminRole = true
  var query = new Query();
  query.size = 7;

  onMount(async () => {
    getList();
  });

  async function getList(e) {
    if (e) {
      query.start = e.detail.start
      query.end = e.detail.end
      if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
      } else {
        query.admin = null
      }
    }
    let ret = await Post(OtcTransactions, query)
    // console.log(ret)
    info.total = ret.total;
    info.buy = ret.Extra.buy;
    info.sell = ret.Extra.sell;
    query.total = ret.total;
    query.page = ret.page;
    let _data = [];

    for (let item of ret.list) {
      // if (localStorage.getItem("uid")==-1){
      //     let arr = [item.order.uid,item.user_info.name,item.user.phone,item.user.inviteCode || "",item.order.tid,(item.order.curreny / item.order.amount).toFixed(2) || "",item.order.amount,item.order.curreny,item.order.show_created_on,OtcType[item.order.type],query.type == 1 ? OtcState[item.order.state] : `<button class="button is-small">确认</button>`];
      // }else {
      //     let arr = [item.order.uid,item.user_info.name,item.user.phone,item.user.inviteCode || "",item.order.tid,(item.order.curreny / item.order.amount).toFixed(2) || "",item.order.amount,item.order.curreny,item.order.show_created_on,OtcType[item.order.type],query.type == 1 ? OtcState[item.order.state] :''];
      // }

    let btn_str = "";
    if(item.order.type == 0){
		 btn_str = `<a class="button is-small" style="background-color: #318AFD;color: #ffffff;"  data-id=${item.tid} type="access" href="/#/otc/detail?tid=${item.order.tid}"}>等待商家确认放币</a>`
	}else{//买币
		 btn_str = `<a class="button is-small" style="background-color: #318AFD;color: #ffffff;"  data-id=${item.tid} type="access" href="/#/otc/detail?tid=${item.order.tid}"}>等待商家付款</a>`
	}
	
	if(item.order.state==4){
		btn_str = `<button class="button is-small" style="background-color: #318AFD;color: #ffffff;"  data-id=${item.order.tid} type="access" href="javascript:void(0);" on:click={userdeal}>用户确认收到款项</button>`
	}
	// else if(item.order.state==3){
	// 	btn_str = `<a class="button is-small" style="background-color: #318AFD;color: #ffffff;"  data-id=${item.order.tid} type="access" href="javascript:void(0);">用户已确认</a>`
	// }
      let arr = [
		  item.order.tid, 
		  item.user_info.name, 
		  item.user.phone,
		  item.user.email, 
		  item.user_info.id, 
		  item.user.inviteCode || "",
		  OtcType[item.order.type], 
		  item.order.amount,
		  (item.order.curreny / item.order.amount).toFixed(2) || "",
		  item.order.show_created_on,
		  query.type == 1 ? OtcState[item.order.state] : (IsAdmin() ? `${btn_str}` : "")
	  ];
      // arr.id = item.order.tid;
      // arr.handler = confirm;
      // if (!query.state) {
      //   arr.push(`<button class="button is-success is-small" data-id=${item.tid} type="access" on:click> 通过 </button>`)
      //   arr.push(`<button class="button is-danger is-small" data-id=${item.tid} type="failed" on:click>取消</button>`)
      // }
	  
	  arr.handler = userdeal
      if (query.type == 0) {
        arr.href = "/otc/detail?tid=" + item.order.tid;
      }
      _data.push(arr);
    }
    data.data = _data;
  }

  async function deal() {
    let id = this.getAttribute("data-id");
    let btn = this.querySelector("button");
    let type = btn.getAttribute("data-type");
    if (type == "access") {
      await Post(VeriSuccess, {id: Number(id), state: 1});
      getList();
    }
  }
  
  async function userdeal(event){
	  //console.log(event.target.getAttribute("data-id"))
	  const tid=event.target.getAttribute("data-id");
	  await Post(Userdeal, {tid: tid});
	  query.type = 0;
	  getList();
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

  function getPrepareList() {
    query.type = 0;
    getList();
  }

</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            用户资金管理
        </span>
		</div>
		<!--//-->
		<div class=" borderRadius4 container">
				<div class="columns rowReverse">
						<div class="column is-4">
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">待买入总计：</span>
										<span class="mid1" style="color:forestgreen">{info.buy}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">待卖出总计：</span>
										<span class="mid1" style="color:forestgreen">{info.sell}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">合计净流入：</span>
										<span class="mid1" style="color:forestgreen">{(info.buy-info.sell).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
						</div>
				</div>
		</div>
		<div class="borderRadius4 container rowCenter ">
				<QueryBar query={query} on:message={getList}/>
		</div>
		<div class="container" style="margin-top: -10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.columns {
				/*background: #fff;*/
		}

		.borderRadius4 {
				border-radius: 4px;
		}

		.container {
				margin: 20px 5px;
		}

		.info {
				background: #fff;
		}
		.rowNumCenter{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				font-size: 12px;
		}
</style>
